<!DOCTYPE html>
<html>
<head>
#include("../../_common/head.html")
<title>管理员</title>
</head>
<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" lay-filter="module-form">
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-inline">
						<input type="text" name="name" placeholder="模糊查询" autocomplete="off" class="layui-input">
					</div>
                </div>
                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="module-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
                    </div>
				</div>
			</form>
        </div>
    </div>
                    
    <div class="layui-card">
        <div class="layui-card-body">
			<table id="module-table" class="layui-table"
				lay-data="{url:'#(ctxPath)/admin/system/role/list?sortField=sortNum&sortType=ASC', page:true, height: 'full-225', initSort: {field:'createdTime', type:'desc'}, toolbar: '#table-toolbar', defaultToolbar: ['filter', 'print', 'exports']}"
				lay-filter="module-table">
				<thead>
					<tr>
						<th lay-data="{type: 'checkbox'}">序号</th>
                        <th lay-data="{field: 'status', align: 'center', width: 70, templet: '#bean-status'}">状态</th>
                        <th lay-data="{field: 'name', align: 'left', width: 200, sort: true}">账号</th>
                        <th lay-data="{field: 'code', align: 'left', width: 100, sort: true}">代码</th>
						<th lay-data="{field: 'createdTime', align: 'center', width: 160, sort: true}">注册</th>
                        <th lay-data="{field: 'remark', align: 'left', width: 250}">说明</th>
                        <th lay-data="{field: 'sortNum', align: 'center', width: 100, sort: true}">排序</th>
						<th lay-data="{toolbar: '#operate-bar', align: 'center', width: 150}">操作</th>
					</tr>
				</thead>
			</table>
        </div>
	</div>

    <!-- 数据表单头部工具栏操作按钮 -->
	<script type="text/html" id="table-toolbar">
    <div class="pear-btn-group">
    #shiroHasPermission('system:role:add')
		<button class="pear-btn pear-btn-primary pear-btn-xs" round lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
    #end
    #shiroHasPermission('system:role:del')
        <button class="pear-btn pear-btn-danger pear-btn-xs" round lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
    #end
    </div>
	</script>

    <!-- 单记录操作按钮 -->
	<script type="text/html" id="operate-bar">
    <div class="pear-btn-group">
    #shiroHasPermission('system:role:edit')
        <button class="pear-btn pear-btn-primary pear-btn-sm" plain lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    #end
    #shiroHasPermission('system:role:assignResource')
        <button class="pear-btn pear-btn-warming pear-btn-sm" plain lay-event="assignResource"><i class="layui-icon layui-icon-transfer"></i></button>
    #end
    #shiroHasPermission('system:role:del')
        <button class="pear-btn pear-btn-danger pear-btn-sm" plain lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    #end
    </div>
	</script>
    
    <!-- 状态字段 -->
    <script type="text/html" id="bean-status">
    #[[
        {{# if(d.status === 'off') { }}
            <span class="layui-badge">禁用</span>
        {{# } else if(d.status === 'on') { }}
            <span class="layui-badge layui-bg-blue">启用</span>
        {{# } }}
    ]]#
    </script>

#include("../../_common/foot.html")
<script>
layui.use(['table', 'form', 'jquery', 'common'], function() {
	var $ = layui.jquery;
	var table = layui.table;
	var form = layui.form;
	var common = layui.common;

	// 模块操作路径
	var MODULE_PATH = "#(ctxPath)/admin/system/role/";
	
	// 弹窗大小
	var AREA = [common.isModile() ? '100%' : '720px', common.isModile() ? '100%' : '540px'];
	
	// 排序对象
	var sortObj = {field:'sortNum', type:'ASC'};

    // 监听行双击事件
	table.on('rowDouble(module-table)', function(obj){
	    window.view(obj.data);
	});
	
	// 监听表格中每条记录的操作
	table.on('tool(module-table)', function(obj) {
		if (obj.event === 'remove') { //
			window.remove(obj);
        } else if (obj.event === 'assignResource') {
            window.assignResource("<i class='layui-icon layui-icon-transfer'></i>&nbsp;&nbsp;指派资源", MODULE_PATH + "assignResource/" + obj.data['id']);
		} else if (obj.event === 'edit') {
			window.addOrEdit("<i class='layui-icon layui-icon-edit'></i>&nbsp;&nbsp;编辑", MODULE_PATH + "edit/" + obj.data['id']);
		}
	});

	// 表格上端的工具条
	table.on('toolbar(module-table)', function(obj) {
		if (obj.event === 'add') {
			window.addOrEdit("<i class='layui-icon layui-icon-add-1'></i>&nbsp;&nbsp;新增", MODULE_PATH + "add");
		} else if (obj.event === 'batchRemove') {
			window.batchRemove(obj);
		}
	});
	
	// 监听排序切换
	table.on('sort(module-table)', function(obj) {
		sortObj = obj;
		window.reloadTable();
	});

	// 页面上方的查询栏
	form.on('submit(module-query)', function(data) {
		window.reloadTable(data);
        $(".layui-colla-title").click();
		return false;
	});

	// 状态字段切换
	form.on('switch(record-enable)', function(obj) {
		layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
	});

	/*
	 * 打开新增或编辑页面
	 */
	window.addOrEdit = function (title, actionUrl){
        layer.open({
            type : 2,
            title : title,
            content : actionUrl,
            maxmin : false,
            area : AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '保存', '取消' ],
            yes : function(index, layero) {
                var iframeWindow = window['layui-layer-iframe' + index],
                submitID = 'data-save', // 此ID必须和弹出iframe窗口中提交按钮的ID和Filter值一致
                submit = layero.find('iframe').contents().find("#" + submitID);

                // 监听提交
                iframeWindow.layui.form.on('submit('+ submitID + ')', function(data) {
                    $.ajax({ // 用Ajax替换弹窗中的提交
                        url : MODULE_PATH + "saveOrUpdate",
                        type : "post",
                        data : data.field, // 获取提交的数据
                        beforeSend : function(){layer.load(1);}, // 防止重复操作
                        complete : function(){layer.closeAll('loading');}, //解除防重复操作
                        success : function(result){
                            if(result.success){
                                // 提交 Ajax 成功后，静态更新表格中的数据
                                window.reloadTable(); // 数据表格刷新
                                layer.close(index); //关闭弹层
                            } else {
                                if(result.message){
                                	// Ajax调用成功，但后台返回失败信息
                                    layer.alert(result.message, {icon: 0});
                                } else {
                                    layer.alert("操作失败！", {icon: 2});
                                }
                            }
                        },
                        error : function (e) { // Ajax调用失败
                            layer.alert("操作失败：" + e.responseText, {icon: 2});
                        }
                    });
                    return false; // 一定要返回False来阻止弹出窗口中提交按钮的再次提交
                });

                submit.trigger('click'); // 这里触发弹出窗口的提交按钮
            }
        });
    }
	
	window.assignResource = function(title, actionUrl){
		layer.open({
            type : 2,
            title : title,
            content : actionUrl,
            maxmin : false,
            area : AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '保存', '取消' ],
            yes : function(index, layero) {
                var iframeWindow = window['layui-layer-iframe' + index],
                submitID = 'data-save', // 此ID必须和弹出iframe窗口中提交按钮的ID和Filter值一致
                submit = layero.find('iframe').contents().find("#" + submitID);

                // 监听提交
                iframeWindow.layui.form.on('submit('+ submitID + ')', function(data) {
                    $.ajax({ // 用Ajax替换弹窗中的提交
                        url : MODULE_PATH + "doAssignResource",
                        type : "post",
                        data : data.field, // 获取提交的数据
                        beforeSend : function(){layer.load(1);}, // 防止重复操作
                        complete : function(){layer.closeAll('loading');}, //解除防重复操作
                        success : function(result){
                            if(result.success){
                                // 提交 Ajax 成功后，静态更新表格中的数据
                                window.reloadTable(); // 数据表格刷新
                                layer.close(index); //关闭弹层
                            } else {
                                if(result.message){
                                    // Ajax调用成功，但后台返回失败信息
                                    layer.alert(result.message, {icon: 0});
                                } else {
                                    layer.alert("操作失败！", {icon: 2});
                                }
                            }
                        },
                        error : function (e) { // Ajax调用失败
                            layer.alert("操作失败：" + e.responseText, {icon: 2});
                        }
                    });
                    return false; // 一定要返回False来阻止弹出窗口中提交按钮的再次提交
                });

                submit.trigger('click'); // 这里触发弹出窗口的提交按钮
            }
        });
	}

	/*
	 * 确认删除操作
	 */
	window.remove = function(obj) {
		layer.confirm('确定要删除该记录？', {
			icon: 3,
			title: '提示'
		}, function(index) {
			layer.close(index);
			var loading = layer.load();
			$.ajax({
				url: MODULE_PATH + "delete/" + obj.data['id'],
				dataType: 'json',
				type: 'delete',
				success: function(result) {
					layer.close(loading);
					if (result.success) {
						layer.msg(result.message, {
							icon: 1,
							time: 1000
						}, function() {
							obj.del();
						});
					} else {
						layer.msg(result.message, {
							icon: 2,
							time: 1000
						});
					}
				}
			})
		});
	}

	/*
	 * 批量删除操作
	 */
	window.batchRemove = function(obj) {
		var checkIds = common.checkField(obj, 'id');
		
		if (checkIds === "") {
			layer.msg("未选中记录", {
				icon: 3,
				time: 1000
			});
			return false;
		}
		
		layer.confirm('确定要删除这些记录', {
			icon: 3,
			title: '提示'
		}, function(index) {
			layer.close(index);
			var loading = layer.load();
			$.ajax({
				url: MODULE_PATH + "batchDelete/" + checkIds,
				dataType: 'json',
				type: 'delete',
				success: function(result) {
					layer.close(loading);
					if (result.success) {
						layer.msg("操作成功", {
							icon: 1,
							time: 1000
						}, function() {
							window.reloadTable();
						});
					} else {
						layer.msg(result.message, {
							icon: 2,
							time: 1000
						});
					}
				}
			})
		});
	}

	/*
	 * 刷新表格操作
	 */
	window.refresh = function(data) {
		window.reloadTable(data);
	}

	/*
	 * 刷新表格
	 */
	window.reloadTable = function(data) {
		/* 查询参数 */
        var where = form.val("module-form");
            where.sortField = sortObj.field;
            where.sortType = sortObj.type;
		table.reload('module-table', {
			url: MODULE_PATH + "list",
			initSort: sortObj,
			where: where
		});
	}
	
    /*
     * 查看记录操作
     */
     window.view = function(data) {
		layer.open({
			type : 2,
			title : "<i class='layui-icon layui-icon-survey'></i>&nbsp;&nbsp;查看",
			content : MODULE_PATH + "view/" + data.id,
			maxmin : false,
			area : AREA,
			closeBtn : 1,
			shadeClose : false,
			anim : 1,
			moveOut : false,
			resize : false,
			btn : [ '关闭' ],
			yes : function(index, layero) {
				layer.close(index); // 关闭弹层
			}
		});
	}
});
</script>
</body>
</html>
